<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孕期营养计划 - Vue版本</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            color: #333;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><text x="10" y="15" text-anchor="middle" font-size="12" fill="rgba(255,255,255,0.1)">💕</text></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>');
            pointer-events: none;
            z-index: -1;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .main-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .sidebar-header {
            padding: 30px 20px;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .sidebar-header h1 {
            font-size: 1.5em;
            margin-bottom: 10px;
        }

        .nav-menu {
            padding: 20px 0;
        }

        .nav-item {
            margin-bottom: 5px;
        }

        .nav-link {
            display: block;
            padding: 15px 25px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .nav-link:hover {
            background: rgba(102, 126, 234, 0.1);
            border-left-color: #667eea;
            color: #667eea;
        }

        .nav-link.active {
            background: rgba(102, 126, 234, 0.15);
            border-left-color: #667eea;
            color: #667eea;
            font-weight: 600;
        }

        /* 子菜单样式 */
        .nav-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 25px;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .nav-group-header:hover {
            background: rgba(102, 126, 234, 0.1);
            border-left-color: #667eea;
            color: #667eea;
        }

        .arrow {
            transition: transform 0.3s ease;
            font-size: 0.8em;
        }

        .arrow.expanded {
            transform: rotate(180deg);
        }

        .nav-submenu {
            background: rgba(248, 249, 250, 0.8);
            border-left: 3px solid #e9ecef;
        }

        .nav-sublink {
            display: block;
            padding: 12px 25px 12px 45px;
            color: #666;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 2px solid transparent;
            font-size: 0.9em;
        }

        .nav-sublink:hover {
            background: rgba(102, 126, 234, 0.08);
            border-left-color: #667eea;
            color: #667eea;
        }

        .nav-sublink.active {
            background: rgba(102, 126, 234, 0.12);
            border-left-color: #667eea;
            color: #667eea;
            font-weight: 500;
        }

        .content-area {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
        }

        .tab-content {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        /* 孕期计算器样式 */
        .pregnancy-calculator {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            text-align: center;
            color: white;
            border: none;
        }

        .pregnancy-calculator h2 {
            color: white;
            margin-bottom: 20px;
            font-size: 1.8em;
            font-weight: 600;
        }

        .pregnancy-calculator p {
            color: rgba(255,255,255,0.9);
            font-size: 1.1em;
        }

        .date-input-section {
            margin: 25px 0;
            text-align: center;
        }

        .date-input-section label {
            display: block;
            color: #fff;
            font-size: 1.2em;
            margin-bottom: 10px;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .date-input {
            padding: 15px 25px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            font-size: 1.1em;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
            color: #2c3e50;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 250px;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

        .date-input:focus {
            outline: none;
            background: linear-gradient(135deg, #ffffff, #f8f9fa);
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1);
            transform: translateY(-3px) scale(1.02);
        }

        .date-input:hover {
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transform: translateY(-1px);
        }

        .pregnancy-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .info-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #2c3e50;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .info-card p {
            color: #2c3e50 !important;
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(240, 147, 251, 0.4);
        }

        .info-card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 1.2em;
        }

        .nutrition-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .nutrition-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #2c3e50;
            backdrop-filter: blur(10px);
        }

        .nutrition-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(79, 172, 254, 0.4);
        }

        .nutrition-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.3em;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .nutrition-card h3::before {
            content: "🌸";
            margin-right: 10px;
            font-size: 1.2em;
        }

        .food-list {
            list-style: none;
            padding: 0;
        }

        .food-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .food-list li:last-child {
            border-bottom: none;
        }

        .tips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .tip-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #2c3e50;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .tip-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(255, 154, 158, 0.4);
        }

        .tip-card h4 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .disease-section, .delivery-section, .babycare-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .disease-card, .delivery-card, .babycare-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #2c3e50;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .disease-card:hover, .delivery-card:hover, .babycare-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(168, 237, 234, 0.4);
        }

        .disease-card h3, .delivery-card h3, .babycare-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .disease-card ul, .delivery-card ul, .babycare-card ul {
            list-style: none;
            padding: 0;
        }

        .disease-card li, .delivery-card li, .babycare-card li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(44, 62, 80, 0.1);
            color: #34495e;
        }

        .disease-card li:last-child, .delivery-card li:last-child, .babycare-card li:last-child {
            border-bottom: none;
        }

        /* 孕期疾病特殊样式 */
        .period-section {
            margin-bottom: 40px;
        }

        .period-title {
            color: #667eea;
            font-size: 1.5em;
            margin-bottom: 20px;
            text-align: center;
            background: rgba(102, 126, 234, 0.1);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid rgba(102, 126, 234, 0.2);
            font-weight: 600;
        }

        .disease-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .disease-card h4 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.3em;
            font-weight: 600;
        }

        .disease-weeks {
            color: #e74c3c;
            font-weight: bold;
            font-size: 0.9em;
            margin-bottom: 15px;
            background: rgba(231, 76, 60, 0.1);
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            border: 1px solid rgba(231, 76, 60, 0.2);
        }

        .disease-details {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(102, 126, 234, 0.2);
        }

        .disease-card p {
            color: #2c3e50;
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .disease-card strong {
            color: #667eea;
        }

        /* 平板端适配 */
        @media (max-width: 1024px) {
            .sidebar {
                width: 200px;
            }
            
            .content-area {
                padding: 20px;
            }
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                order: 2;
                position: relative;
            }

            .content-area {
                order: 1;
                padding: 15px;
            }

            .tab-content {
                padding: 20px;
                border-radius: 15px;
            }

            .pregnancy-calculator {
                padding: 20px;
                margin-bottom: 20px;
            }

            .pregnancy-calculator h2 {
                font-size: 1.5em;
            }

            .nutrition-grid, .tips-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .info-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .info-card {
                padding: 15px;
            }

            .sidebar-header {
                padding: 20px 15px;
            }

            .sidebar-header h1 {
                font-size: 1.3em;
            }

            .nav-link {
                padding: 12px 20px;
                font-size: 0.95em;
            }
        }

        /* 小屏手机适配 */
        @media (max-width: 480px) {
            .content-area {
                padding: 10px;
            }

            .tab-content {
                padding: 15px;
                border-radius: 10px;
            }

            .pregnancy-calculator {
                padding: 15px;
                margin-bottom: 15px;
            }

            .pregnancy-calculator h2 {
                font-size: 1.3em;
                margin-bottom: 15px;
            }

            .pregnancy-calculator p {
                font-size: 1em;
            }

            .date-input-section label {
                font-size: 1.1em;
            }

            .date-input {
                font-size: 16px; /* 防止iOS缩放 */
                padding: 12px;
            }

            .info-cards {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .info-card {
                padding: 12px;
            }

            .info-card h3 {
                font-size: 0.9em;
                margin-bottom: 8px;
            }

            .info-card p {
                font-size: 20px;
            }

            .sidebar-header {
                padding: 15px 10px;
            }

            .sidebar-header h1 {
                font-size: 1.2em;
            }

            .nav-link {
                padding: 10px 15px;
                font-size: 0.9em;
            }

            /* 优化触摸目标大小 */
            .nav-link {
                min-height: 44px;
                display: flex;
                align-items: center;
            }

            /* 优化表单元素 */
            input, select, textarea {
                font-size: 16px !important; /* 防止iOS缩放 */
            }

            /* 移动端卡片优化 */
            .disease-card, .delivery-card, .babycare-card {
                padding: 15px;
                margin-bottom: 15px;
            }

            .disease-card h3, .delivery-card h3, .babycare-card h3 {
                font-size: 1.1em;
                margin-bottom: 10px;
            }

            .disease-card h4 {
                font-size: 1em;
                margin-bottom: 8px;
            }

            .disease-card p, .delivery-card p, .babycare-card p {
                font-size: 0.9em;
                line-height: 1.5;
            }

            .disease-card ul, .delivery-card ul, .babycare-card ul {
                padding-left: 15px;
            }

            .disease-card li, .delivery-card li, .babycare-card li {
                font-size: 0.85em;
                margin-bottom: 6px;
                line-height: 1.4;
            }

            .period-title {
                font-size: 1.2em;
                margin: 15px 0 10px 0;
                padding: 8px 12px;
            }

            .disease-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .disease-weeks {
                font-size: 0.8em;
                padding: 4px 8px;
            }

            .disease-details {
                margin-top: 8px;
            }

            /* 注意事项卡片 */
            .precaution-card {
                padding: 15px;
                margin-bottom: 15px;
            }

            .precaution-card h3 {
                font-size: 1.1em;
                margin-bottom: 10px;
            }

            .precaution-card p {
                font-size: 0.9em;
                line-height: 1.5;
            }

            /* 个人小贴士移动端优化 */
            .personal-tip-card {
                padding: 15px;
                margin-bottom: 20px;
            }

            .tip-header h3 {
                font-size: 1.3em;
            }

            .heart-icon {
                font-size: 24px;
            }

            .tip-content p {
                font-size: 0.9em;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .love-signature {
                 font-size: 1em;
                 margin-top: 15px;
             }
         }

        /* 移动端汉堡菜单 */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .mobile-menu-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.05);
        }

        .mobile-menu-btn span {
            width: 20px;
            height: 2px;
            background: #667eea;
            margin: 2px 0;
            transition: all 0.3s ease;
            border-radius: 1px;
        }

        .mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            backdrop-filter: blur(2px);
        }

        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: flex;
            }

            .mobile-overlay {
                display: block;
            }

            .sidebar {
                position: fixed;
                left: -100%;
                top: 0;
                height: 100vh;
                z-index: 1000;
                transition: left 0.3s ease;
                overflow-y: auto;
            }

            .sidebar.open {
                left: 0;
            }

            .content-area {
                width: 100%;
                margin-left: 0;
            }
        }
        
        /* 个人小贴士样式 */
        .personal-tip-card {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(255, 154, 158, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }
        
        .personal-tip-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: sparkle 3s ease-in-out infinite;
        }
        
        @keyframes sparkle {
            0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
            50% { transform: rotate(180deg) scale(1.1); opacity: 0.6; }
        }
        
        .tip-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
            z-index: 2;
        }
        
        .tip-header h3 {
            color: #fff;
            font-size: 24px;
            margin: 0 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            font-weight: 600;
        }
        
        .heart-icon {
            font-size: 28px;
            animation: heartbeat 2s ease-in-out infinite;
        }
        
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        .tip-content {
            position: relative;
            z-index: 2;
        }
        
        .tip-content p {
            color: #fff;
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 15px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            text-align: center;
        }
        
        .love-signature {
            text-align: right;
            font-style: italic;
            color: #fff;
            font-size: 18px;
            margin-top: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            font-weight: 500;
        }
        
        /* 生产指南和宝宝护理样式 */
        .delivery-grid, .babycare-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .delivery-card, .babycare-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .delivery-card:hover, .babycare-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.15);
        }
        
        .delivery-card h3, .babycare-card h3 {
            color: #667eea;
            font-size: 20px;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .delivery-card p, .babycare-card p {
            color: #555;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .delivery-steps, .care-tips {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .delivery-steps li, .care-tips li {
            color: #666;
            font-size: 14px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
            position: relative;
            padding-left: 20px;
        }
        
        .delivery-steps li:before, .care-tips li:before {
            content: '•';
            color: #667eea;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        .delivery-steps li:last-child, .care-tips li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 移动端汉堡菜单按钮 -->
        <div class="mobile-menu-btn" @click="toggleSidebar" v-show="isMobile">
            <span></span>
            <span></span>
            <span></span>
        </div>
        
        <!-- 移动端遮罩层 -->
        <div class="mobile-overlay" v-show="isMobile && sidebarOpen" @click="closeSidebar"></div>
        
        <div class="main-container">
            <!-- 左侧导航 -->
            <div class="sidebar" :class="{open: sidebarOpen}">
                <div class="sidebar-header">
                    <h1>🤱 孕期助手</h1>
                    <p>陪伴您的孕期之旅</p>
                </div>
                <nav class="nav-menu">
                    <div class="nav-item">
                        <a href="#" class="nav-link" :class="{active: activeTab === 'overview'}" @click="setActiveTab('overview')">🏠 孕期概览</a>
                    </div>
                    <div class="nav-item">
                        <a href="#" class="nav-link" :class="{active: activeTab === 'nutrition'}" @click="setActiveTab('nutrition')">🍎 营养餐食</a>
                    </div>
                    <div class="nav-item">
                        <a href="#" class="nav-link" :class="{active: activeTab === 'precautions'}" @click="setActiveTab('precautions')">⚠️ 孕期注意</a>
                    </div>
                    <div class="nav-item">
                        <a href="#" class="nav-link" :class="{active: activeTab === 'diseases'}" @click="setActiveTab('diseases')">🏥 孕期疾病</a>
                    </div>
                    <div class="nav-item">
                        <a href="#" class="nav-link" :class="{active: activeTab === 'delivery'}" @click="setActiveTab('delivery')">👶 生产指南</a>
                    </div>
                    <div class="nav-item nav-group">
                        <div class="nav-group-header" @click="toggleBabyCareMenu">
                            <span>🍼 宝宝护理</span>
                            <span class="arrow" :class="{expanded: babyCareMenuExpanded}">▼</span>
                        </div>
                        <div class="nav-submenu" v-show="babyCareMenuExpanded">
                            <a href="#" class="nav-sublink" :class="{active: activeTab === 'newborn-care'}" @click="setActiveTab('newborn-care')">👶 新生儿护理</a>
                            <a href="#" class="nav-sublink" :class="{active: activeTab === 'feeding-guide'}" @click="setActiveTab('feeding-guide')">🍼 喂养指导</a>
                            <a href="#" class="nav-sublink" :class="{active: activeTab === 'sleep-management'}" @click="setActiveTab('sleep-management')">😴 睡眠管理</a>
                            <a href="#" class="nav-sublink" :class="{active: activeTab === 'health-monitor'}" @click="setActiveTab('health-monitor')">🏥 健康监护</a>
                        </div>
                    </div>
                </nav>
            </div>

            <!-- 主内容区域 -->
            <div class="content-area">
                <div class="tab-content">
                    <!-- 孕期概览 -->
                    <div v-if="activeTab === 'overview'">
                        <!-- 专属小贴士 -->
                        <div class="personal-tip-card">
                            <div class="tip-header">
                                <span class="heart-icon">💕</span>
                                <h3>给甘雪莹的温馨小贴士</h3>
                                <span class="heart-icon">💕</span>
                            </div>
                            <div class="tip-content">
                                <p>亲爱的雪莹，怀孕是一段美妙而神奇的旅程。每一天，我们的小宝贝都在健康成长，而你正在做着世界上最伟大的事情。</p>
                                <p>不要为那些小小的担心而焦虑，每个准妈妈都会有这样的感受，这说明你是一个充满爱心的妈妈。相信自己的身体，相信我们的宝贝，一切都会很好的。</p>
                                <p>记住，我会一直陪伴在你身边，我们一起迎接这个小天使的到来。你已经是最棒的妈妈了！ 🌟</p>
                                <div class="love-signature">— 永远爱你的老公 ❤️</div>
                            </div>
                        </div>
                        
                        <div class="pregnancy-calculator">
                            <h2>🤱 孕期计算器</h2>
                            <p>输入您的末次月经日期，了解您的孕期进展</p>
                            <div class="date-input-section">
                                <label for="lastPeriodDate">末次月经日期：</label>
                                <input type="date" id="lastPeriodDate" v-model="lastPeriodDate" @change="calculatePregnancy" class="date-input">
                            </div>
                            <div class="pregnancy-info">
                                <div class="info-card">
                                    <h3>孕期天数</h3>
                                    <p>{{ pregnancyInfo.days }}天</p>
                                </div>
                                <div class="info-card">
                                    <h3>孕期周数</h3>
                                    <p>{{ pregnancyInfo.weeks }}周{{ pregnancyInfo.extraDays }}天</p>
                                </div>
                                <div class="info-card">
                                    <h3>预产期</h3>
                                    <p>{{ pregnancyInfo.dueDate }}</p>
                                </div>
                                <div class="info-card">
                                    <h3>距离预产期</h3>
                                    <p>{{ pregnancyInfo.remainingDays }}天</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 营养餐食 -->
                    <div v-if="activeTab === 'nutrition'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">🍎 孕期营养指南</h2>
                        
                        <div class="nutrition-grid">
                            <div class="nutrition-card" v-for="nutrition in nutritionData" :key="nutrition.id">
                                <h3>{{ nutrition.title }}</h3>
                                <p>{{ nutrition.description }}</p>
                                <ul class="food-list">
                                    <li v-for="food in nutrition.foods" :key="food">{{ food }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 孕期注意事项 -->
                    <div v-if="activeTab === 'precautions'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">⚠️ 孕期注意事项</h2>
                        
                        <div class="tips-grid">
                            <div class="tip-card" v-for="tip in precautionData" :key="tip.id">
                                <h4>{{ tip.title }}</h4>
                                <p>{{ tip.content }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- 孕期疾病 -->
                    <div v-if="activeTab === 'diseases'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">🏥 孕期常见疾病</h2>
                        
                        <div class="disease-section">
                            <div v-for="periodData in diseaseData" :key="periodData.period" class="period-section">
                                <h3 class="period-title">{{ periodData.period }}</h3>
                                <div class="disease-grid">
                                    <div class="disease-card" v-for="disease in periodData.diseases" :key="disease.name">
                                        <h4>{{ disease.name }}</h4>
                                        <p class="disease-weeks">{{ disease.weeks }}</p>
                                        <p><strong>症状：</strong>{{ disease.symptoms }}</p>
                                        <p><strong>预防：</strong>{{ disease.prevention }}</p>
                                        <p><strong>处理：</strong>{{ disease.treatment }}</p>
                                        <div v-if="disease.details" class="disease-details">
                                            <p><strong>详细信息：</strong></p>
                                            <ul>
                                                <li v-for="detail in disease.details" :key="detail">{{ detail }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 其他疾病 -->
                            <div class="period-section">
                                <h3 class="period-title">其他常见疾病</h3>
                                <div class="disease-grid">
                                    <div class="disease-card" v-for="disease in diseaseData.filter(d => d.id)" :key="disease.id">
                                        <h4>{{ disease.name }}</h4>
                                        <p><strong>症状：</strong>{{ disease.symptoms }}</p>
                                        <p><strong>预防：</strong>{{ disease.prevention }}</p>
                                        <p><strong>处理：</strong>{{ disease.treatment }}</p>
                                        <div v-if="disease.details" class="disease-details">
                                            <p><strong>详细信息：</strong></p>
                                            <ul>
                                                <li v-for="detail in disease.details" :key="detail">{{ detail }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 生产指南 -->
                    <div v-if="activeTab === 'delivery'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">👶 生产指南</h2>
                        
                        <div class="delivery-grid">
                            <div class="delivery-card" v-for="delivery in deliveryData" :key="delivery.id">
                                <h3>{{ delivery.title }}</h3>
                                <p>{{ delivery.description }}</p>
                                <ul class="delivery-steps">
                                    <li v-for="step in delivery.steps" :key="step">{{ step }}</li>
                                </ul>
                            </div>
                        </div>
                            </div>
                    </div>

                    <!-- 新生儿护理 -->
                    <div v-if="activeTab === 'newborn-care'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">👶 新生儿护理指南</h2>
                        
                        <div class="babycare-grid">
                            <div class="babycare-card" v-for="care in newbornCareData" :key="care.id">
                                <h3>{{ care.title }}</h3>
                                <p>{{ care.description }}</p>
                                <ul class="care-tips">
                                    <li v-for="tip in care.tips" :key="tip">{{ tip }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 喂养指导 -->
                    <div v-if="activeTab === 'feeding-guide'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">🍼 喂养指导</h2>
                        
                        <div class="babycare-grid">
                            <div class="babycare-card" v-for="feeding in feedingGuideData" :key="feeding.id">
                                <h3>{{ feeding.title }}</h3>
                                <p>{{ feeding.description }}</p>
                                <ul class="care-tips">
                                    <li v-for="tip in feeding.tips" :key="tip">{{ tip }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 睡眠管理 -->
                    <div v-if="activeTab === 'sleep-management'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">😴 睡眠管理</h2>
                        
                        <div class="babycare-grid">
                            <div class="babycare-card" v-for="sleep in sleepManagementData" :key="sleep.id">
                                <h3>{{ sleep.title }}</h3>
                                <p>{{ sleep.description }}</p>
                                <ul class="care-tips">
                                    <li v-for="tip in sleep.tips" :key="tip">{{ tip }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 健康监护 -->
                    <div v-if="activeTab === 'health-monitor'">
                        <h2 style="color: #667eea; margin-bottom: 30px; text-align: center;">🏥 健康监护</h2>
                        
                        <div class="babycare-grid">
                            <div class="babycare-card" v-for="health in healthMonitorData" :key="health.id">
                                <h3>{{ health.title }}</h3>
                                <p>{{ health.description }}</p>
                                <ul class="care-tips">
                                    <li v-for="tip in health.tips" :key="tip">{{ tip }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    activeTab: 'overview',
                    lastPeriodDate: '2025-05-02',
                    sidebarOpen: false,
                    isMobile: false,
                    babyCareMenuExpanded: false,
                    pregnancyInfo: {
                        days: 0,
                        weeks: 0,
                        extraDays: 0,
                        dueDate: '请选择末次月经日期',
                        remainingDays: 0
                    },
                    nutritionData: [
                        {
                            id: 1,
                            title: '孕早期营养（1-12周）',
                            description: '胎儿器官形成关键期，叶酸尤为重要，可预防神经管缺陷',
                            foods: [
                                '叶酸：绿叶蔬菜、豆类、坚果、动物肝脏',
                                '蛋白质：瘦肉、鱼类、蛋类、豆制品',
                                '维生素B6：香蕉、土豆、鸡肉（缓解孕吐）',
                                '维生素C：柑橘类、草莓、西红柿、猕猴桃',
                                '全谷物：燕麦、糙米、全麦面包（提供能量）',
                                '充足水分：每天8-10杯水（缓解便秘）'
                            ]
                        },
                        {
                            id: 9,
                            title: '疫苗接种指南',
                            description: '按时接种疫苗，保护宝宝健康',
                            tips: [
                                '出生24小时内：乙肝疫苗第一针、卡介苗',
                                '1个月：乙肝疫苗第二针',
                                '2个月：脊灰疫苗第一针、百白破第一针',
                                '3个月：脊灰疫苗第二针、百白破第二针',
                                '4个月：脊灰疫苗第三针、百白破第三针',
                                '6个月：乙肝疫苗第三针、A群流脑疫苗第一针',
                                '8个月：麻疹疫苗、乙脑疫苗第一针',
                                '9个月：A群流脑疫苗第二针',
                                '12个月：水痘疫苗（自费推荐）',
                                '18个月：百白破第四针、麻腮风疫苗',
                                '2岁：乙脑疫苗第二针、甲肝疫苗'
                            ]
                        },
                        {
                            id: 10,
                            title: '宝宝用品推荐',
                            description: '新生儿必备用品和品牌推荐',
                            tips: [
                                '奶瓶：贝亲、新安怡、布朗博士（玻璃材质优先）',
                                '纸尿裤：帮宝适、花王、大王、好奇（根据宝宝体型选择）',
                                '婴儿车：好孩子、宝得适、Cybex、Stokke',
                                '安全座椅：宝得适、赛百适、迈可适（0-4岁组别）',
                                '婴儿床：好孩子、小龙哈彼、宜家（实木材质）',
                                '洗护用品：强生、贝亲、加州宝宝、艾维诺',
                                '玩具：费雪、美泰、乐高得宝、布书类',
                                '服装：优衣库、Carter\'s、GAP、H&M（纯棉材质）',
                                '辅食用品：贝亲、新安怡、小白熊（6个月后使用）',
                                '体温计：欧姆龙、博朗、迈克大夫（电子体温计）'
                            ]
                        },
                        {
                            id: 2,
                            title: '孕中期营养（13-27周）',
                            description: '胎儿快速生长期，需要增加蛋白质和钙质摄入，预防贫血',
                            foods: [
                                '钙质：牛奶、酸奶、芝麻、小鱼干、豆腐',
                                '铁质：瘦肉、动物肝脏、菠菜、红枣、黑木耳',
                                'DHA：深海鱼、核桃、亚麻籽（促进大脑发育）',
                                '蛋白质：鸡蛋、豆腐、鱼肉、瘦牛肉',
                                '维生素D：鱼类、蛋黄、适量日晒',
                                '膳食纤维：蔬菜、水果、粗粮（预防便秘）'
                            ]
                        },
                        {
                            id: 3,
                            title: '孕晚期营养（28-40周）',
                            description: '为分娩做准备，控制体重，预防妊娠糖尿病，保证营养均衡',
                            foods: [
                                '优质蛋白：鱼肉、瘦肉、蛋类、奶类',
                                '维生素K：绿叶蔬菜、西兰花、卷心菜（预防出血）',
                                '纤维素：燕麦、红薯、苹果、梨（预防便秘）',
                                '钙和磷：奶制品、豆制品、芝麻',
                                '锌：牡蛎、瘦肉、南瓜子（促进免疫力）',
                                '适量碳水化合物：控制体重增长'
                            ]
                        },
                        {
                            id: 4,
                            title: '孕期禁忌食物',
                            description: '这些食物可能含有细菌、寄生虫或有害物质，影响胎儿健康',
                            foods: [
                                '生鱼片、生肉、生鸡蛋（避免感染）',
                                '未经巴氏杀菌的奶制品',
                                '高汞鱼类：鲨鱼、旗鱼、鲭鱼王',
                                '酒精类饮品（影响胎儿发育）',
                                '过量咖啡因：每天不超过200mg',
                                '加工肉制品：火腿、香肠（含亚硝酸盐）'
                            ]
                        },
                        {
                            id: 5,
                            title: '孕期营养补充剂',
                            description: '在医生指导下合理补充营养素，弥补饮食不足',
                            foods: [
                                '叶酸片：每日400-800微克',
                                '钙片：每日1000-1200毫克',
                                '铁剂：根据血红蛋白水平调整',
                                'DHA胶囊：每日200-300毫克',
                                '维生素D：每日600-800国际单位',
                                '孕妇专用复合维生素'
                            ]
                        },
                        {
                            id: 6,
                            title: '孕早期食谱（1-12周）',
                            description: '缓解孕吐，保证基础营养',
                            foods: [
                                '早餐：小米粥+蒸蛋羹+苏打饼干',
                                '上午加餐：香蕉+温开水',
                                '午餐：白米饭+清蒸鱼+菠菜汤',
                                '下午加餐：全麦吐司+柠檬蜂蜜水',
                                '晚餐：瘦肉粥+清炒时蔬+温牛奶',
                                '睡前：苏打饼干+温开水（缓解晨吐）'
                            ]
                        },
                        {
                            id: 7,
                            title: '孕中期食谱（13-27周）',
                            description: '增加营养密度，促进胎儿发育',
                            foods: [
                                '早餐：燕麦牛奶+煮鸡蛋+全麦面包+猕猴桃',
                                '上午加餐：核桃+酸奶+红枣',
                                '午餐：糙米饭+红烧带鱼+菠菜炒豆腐+紫菜蛋花汤',
                                '下午加餐：苹果+坚果+牛奶',
                                '晚餐：小米饭+清炖排骨+西兰花+银耳莲子汤',
                                '睡前：温牛奶+全麦饼干'
                            ]
                        },
                        {
                            id: 8,
                            title: '孕晚期食谱（28-40周）',
                            description: '控制体重，为分娩储备能量',
                            foods: [
                                '早餐：杂粮粥+蒸蛋+全麦面包+橙子',
                                '上午加餐：低脂酸奶+少量坚果',
                                '午餐：二米饭+清蒸鲈鱼+芹菜炒肉丝+冬瓜汤',
                                '下午加餐：苹果+无糖豆浆',
                                '晚餐：红薯+蒸蛋羹+清炒小白菜+海带汤',
                                '睡前：温牛奶（少量，避免夜间频繁起夜）'
                            ]
                        },
                        {
                            id: 9,
                            title: '孕期特色营养汤品',
                            description: '补充营养的美味汤品制作',
                            foods: [
                                '鲫鱼豆腐汤：补钙促进乳汁分泌',
                                '排骨莲藕汤：补铁补血，增强体质',
                                '鸡汤炖山药：健脾养胃，补充蛋白质',
                                '银耳红枣汤：美容养颜，补气血',
                                '海带排骨汤：补碘促进胎儿智力发育',
                                '冬瓜薏米汤：利水消肿，预防水肿'
                            ]
                        },
                        {
                            id: 10,
                            title: '孕期健康小食推荐',
                            description: '营养丰富的加餐选择',
                            foods: [
                                '自制酸奶杯：酸奶+燕麦+蓝莓+坚果',
                                '营养三明治：全麦面包+牛油果+水煮蛋+生菜',
                                '水果沙拉：苹果+香蕉+猕猴桃+酸奶',
                                '坚果拼盘：核桃+杏仁+腰果+葡萄干',
                                '蒸蛋羹：鸡蛋+牛奶+虾仁+香菇',
                                '红豆薏米粥：去湿气，补血养颜'
                            ]
                        }
                    ],
                    precautionData: [
                        {
                            id: 1,
                            title: '饮食禁忌',
                            content: '避免生鱼片、生肉、未煮熟的鸡蛋、酒精、高咖啡因饮品等。'
                        },
                        {
                            id: 2,
                            title: '用药安全',
                            content: '任何药物使用前都要咨询医生，包括中药和保健品。'
                        },
                        {
                            id: 3,
                            title: '运动指导',
                            content: '适量运动如散步、孕妇瑜伽，避免剧烈运动和高风险活动。'
                        },
                        {
                            id: 4,
                            title: '睡眠建议',
                            content: '保证充足睡眠，孕中后期建议左侧卧位，使用孕妇枕。'
                        },
                        {
                            id: 5,
                            title: '环境安全',
                            content: '避免接触有害化学物质、辐射，保持室内空气流通。'
                        },
                        {
                            id: 6,
                            title: '心理健康',
                            content: '保持心情愉悦，及时与家人朋友沟通，必要时寻求专业帮助。'
                        }
                    ],
                    diseaseData: [
                        {
                            period: '孕早期（1-12周）',
                            diseases: [
                                {
                                    name: '妊娠剧吐',
                                    weeks: '6-12周高发',
                                    symptoms: '严重恶心呕吐、食欲不振、体重下降、脱水',
                                    prevention: '少食多餐，避免空腹，选择清淡食物',
                                    treatment: '补液治疗，止吐药物，营养支持',
                                    details: [
                                        '通常在孕6-12周最严重，多数在孕16-20周缓解',
                                        '可能与激素水平变化、精神因素有关',
                                        '严重时可导致电解质紊乱、肝功能异常',
                                        '生姜、维生素B6可能有助于缓解症状'
                                    ]
                                },
                                {
                                    name: '先兆流产',
                                    weeks: '12周前',
                                    symptoms: '阴道少量出血、下腹痛、腰酸',
                                    prevention: '避免剧烈运动，充分休息，定期产检',
                                    treatment: '卧床休息，黄体酮保胎，密切观察',
                                    details: [
                                        '孕早期最常见的并发症之一',
                                        '多数与胚胎染色体异常有关',
                                        '及时就医，避免自行用药',
                                        '保持心情平静，避免过度紧张'
                                    ]
                                }
                            ]
                        },
                        {
                            period: '孕中期（13-27周）',
                            diseases: [
                                {
                                    name: '妊娠期糖尿病',
                                    weeks: '24-28周筛查',
                                    symptoms: '多饮、多尿、多食，体重异常增长',
                                    prevention: '控制饮食，适量运动，定期检查血糖',
                                    treatment: '饮食调节，必要时使用胰岛素',
                                    details: [
                                        '发生率约为2-10%，通常在孕24-28周筛查',
                                        '可能导致巨大儿、早产、新生儿低血糖等并发症',
                                        '产后大多数可恢复正常，但未来患糖尿病风险增加',
                                        '需要监测胎儿生长发育情况'
                                    ]
                                },
                                {
                                    name: '孕期缺铁性贫血',
                                    weeks: '20周后常见',
                                    symptoms: '疲劳、头晕、面色苍白、心悸、气短',
                                    prevention: '多吃含铁食物，补充叶酸和维生素C',
                                    treatment: '口服铁剂补充，改善饮食结构，严重时静脉补铁',
                                    details: [
                                        '孕期最常见的贫血类型，发生率约20-40%',
                                        '孕期血容量增加，铁需求量大幅增加',
                                        '可影响胎儿智力发育和出生体重',
                                        '铁剂最好在餐后服用，避免与茶、咖啡同服'
                                    ]
                                }
                            ]
                        },
                        {
                            period: '孕晚期（28-40周）',
                            diseases: [
                                {
                                    name: '妊娠高血压综合征',
                                    weeks: '20周后，32-36周高发',
                                    symptoms: '血压升高、蛋白尿、水肿、头痛、视力模糊',
                                    prevention: '控制体重，低盐饮食，定期产检，充足休息',
                                    treatment: '休息，降压药物治疗，严重时需住院监护',
                                    details: [
                                        '通常发生在孕20周后，初产妇更常见',
                                        '严重时可发展为子痫前期或子痫，危及母婴生命',
                                        '可能导致胎盘早剥、胎儿生长受限等',
                                        '产后血压通常会逐渐恢复正常'
                                    ]
                                },
                                {
                                    name: '妊娠期肝内胆汁淤积症',
                                    weeks: '28周后多发',
                                    symptoms: '皮肤瘙痒（尤其手脚）、黄疸、食欲不振',
                                    prevention: '定期产检，监测肝功能和胆汁酸水平',
                                    treatment: '熊去氧胆酸治疗，严重时需提前分娩',
                                    details: [
                                        '通常发生在孕晚期，瘙痒是最早症状',
                                        '可能增加胎儿窘迫、早产、死胎风险',
                                        '需要密切监测胎儿情况，可能需要提前分娩',
                                        '产后症状通常迅速缓解'
                                    ]
                                }
                            ]
                        },
                        {
                            id: 6,
                            name: '妊娠期尿路感染',
                            symptoms: '尿频、尿急、尿痛、腰痛、发热',
                            prevention: '多喝水、及时排尿、注意个人卫生',
                            treatment: '抗生素治疗（孕期安全药物），多饮水',
                            details: [
                                '孕期由于尿路解剖和生理变化，感染风险增加',
                                '未及时治疗可能导致肾盂肾炎、早产',
                                '需要选择孕期安全的抗生素',
                                '治疗后需要复查尿常规确认治愈'
                            ]
                        }
                    ],
                    deliveryData: [
                        {
                            id: 1,
                            title: '📋 详细产前准备清单',
                            description: '新手父母必备的完整准备指南',
                            steps: [
                                '待产包-妈妈用品：睡衣2-3套、哺乳内衣3套、产褥垫、卫生巾、洗漱用品、拖鞋',
                                '待产包-宝宝用品：连体衣3-5套、包被2条、纸尿裤NB码、奶瓶、湿巾、小毛巾',
                                '重要证件：身份证、户口本、准生证、医保卡、产检资料、银行卡',
                                '医院选择：距离家近、设备完善、医生经验丰富、有新生儿科',
                                '家庭准备：月嫂预约、家人分工、婴儿房布置、紧急联系人'
                            ]
                        },
                        {
                            id: 2,
                            title: '🫁 分娩呼吸技巧详解',
                            description: '掌握正确呼吸法，减轻分娩疼痛',
                            steps: [
                                '拉玛泽呼吸法：深呼吸-轻浅呼吸-喘息呼吸-吹蜡烛呼吸',
                                '宫缩初期：鼻吸气4秒-嘴呼气6秒，放松全身肌肉',
                                '宫缩强烈期：快速浅呼吸，嘴微张，像小狗喘气',
                                '宫口全开期：深吸气憋气用力，配合宫缩向下用力',
                                '胎头娩出期：张嘴哈气，避免用力，防止会阴撕裂',
                                '练习时间：孕32周开始，每天练习15-20分钟'
                            ]
                        },
                        {
                            id: 3,
                            title: '📝 个性化分娩计划',
                            description: '制定适合自己的分娩方案',
                            steps: [
                                '分娩方式选择：自然分娩vs剖宫产，听取医生建议',
                                '疼痛管理：无痛分娩、拉玛泽呼吸法、按摩、音乐',
                                '陪产人员：丈夫陪产、家人陪伴、专业导乐',
                                '特殊需求：宗教信仰、饮食要求、环境偏好',
                                '紧急预案：难产处理、新生儿抢救、产后出血应对',
                                '产后计划：母乳喂养、产后恢复、新生儿护理'
                            ]
                        },
                        {
                            id: 4,
                            title: '🚨 早产预防与应急处理',
                            description: '了解早产风险，掌握应急知识',
                            steps: [
                                '早产定义：妊娠28-37周间分娩，胎儿体重1000-2500g',
                                '高危因素：多胎妊娠、感染、宫颈机能不全、胎膜早破',
                                '预警信号：规律宫缩、腹痛、阴道出血、破水、腰酸',
                                '紧急处理：立即平卧、停止活动、及时就医、挂急诊科',
                                '预防措施：定期产检、避免感染、控制体重、戒烟酒',
                                '早产儿护理：保温、喂养、感染预防、发育监测'
                            ]
                        },
                        {
                            id: 5,
                            title: '🏥 分娩征象与就医时机',
                            description: '准确识别分娩信号，把握就医时机',
                            steps: [
                                '真性宫缩：规律性、持续性、逐渐加强，间隔5-10分钟',
                                '假性宫缩：不规律、时强时弱、休息后缓解',
                                '见红：少量血性分泌物，24-48小时内可能分娩',
                                '破水：羊水突然流出，无论是否宫缩都要立即就医',
                                '胎动异常：胎动明显减少或停止，立即就医检查',
                                '就医指征：初产妇宫缩间隔5分钟，经产妇宫缩间隔10分钟'
                            ]
                        },
                        {
                            id: 6,
                            title: '🔄 分娩三产程详解',
                            description: '了解分娩全过程，配合医护人员',
                            steps: [
                                '第一产程（宫口扩张期）：初产妇11-12小时，经产妇6-8小时',
                                '潜伏期：宫口开0-3cm，宫缩较轻，可进食、休息、洗澡',
                                '活跃期：宫口开3-10cm，宫缩加强，配合呼吸法',
                                '第二产程（胎儿娩出期）：初产妇1-2小时，经产妇数分钟至1小时',
                                '第三产程（胎盘娩出期）：5-30分钟，等待胎盘自然剥离',
                                '产后观察：产后2小时密切观察，预防产后出血'
                            ]
                        },
                        {
                            id: 7,
                            title: '💪 产后恢复指导',
                            description: '科学坐月子，促进身体恢复',
                            steps: [
                                '产后第一天：观察出血、排尿、体温，早期下床活动',
                                '饮食调理：清淡易消化、营养均衡、多喝汤水促进乳汁分泌',
                                '个人卫生：每日清洗外阴、勤换卫生垫、注意乳房护理',
                                '运动恢复：产后6-8周开始轻度运动，循序渐进',
                                '心理调适：预防产后抑郁，家人关爱支持很重要',
                                '复查时间：产后42天全面检查，评估恢复情况'
                            ]
                        }
                    ],
                    newbornCareData: [
                        {
                            id: 1,
                            title: '新生儿睡眠',
                            description: '新生儿每天需要16-20小时的睡眠',
                            tips: [
                                '保持安静的睡眠环境',
                                '建立规律的作息时间',
                                '注意睡眠姿势，避免趴睡',
                                '观察宝宝的睡眠信号'
                            ]
                        },
                        {
                            id: 2,
                            title: '新生儿穿衣',
                            description: '根据季节和室温选择合适的衣物',
                            tips: [
                                '选择纯棉、透气的衣物',
                                '避免过度包裹，注意散热',
                                '经常检查宝宝的体温',
                                '衣物要经常清洗和消毒'
                            ]
                        },
                        {
                            id: 3,
                            title: '奶粉喂养',
                            description: '如果无法母乳喂养，正确的奶粉喂养很重要',
                            tips: [
                                '选择适合年龄的配方奶粉',
                                '严格按照说明书调配',
                                '注意奶瓶和奶嘴的清洁',
                                '观察宝宝的消化情况'
                            ]
                        },
                        {
                            id: 4,
                            title: '日常护理',
                            description: '新生儿需要细心的日常护理',
                            tips: [
                                '每天给宝宝洗澡，注意水温',
                                '及时更换尿布，保持干爽',
                                '定期剪指甲，避免抓伤',
                                '注意脐带护理，保持干燥'
                            ]
                        },
                        {
                            id: 5,
                            title: '常见疾病预防',
                            description: '了解新生儿常见疾病的症状和预防',
                            tips: [
                                '黄疸：观察皮肤和眼白颜色变化',
                                '湿疹：保持皮肤清洁干燥，选择温和护肤品',
                                '感冒：避免接触感冒人群，注意保暖',
                                '腹泻：观察大便性状，及时补充水分'
                            ]
                        },
                        {
                            id: 6,
                            title: '发热处理',
                            description: '新生儿发热的正确处理方法',
                            tips: [
                                '体温超过37.5°C需要关注',
                                '物理降温：温水擦浴，减少衣物',
                                '保持室内通风，温度适宜',
                                '及时就医，不要自行用药'
                            ]
                        },
                        {
                            id: 7,
                            title: '呼吸道疾病',
                            description: '预防和识别呼吸道疾病',
                            tips: [
                                '咳嗽：观察咳嗽性质和频率',
                                '鼻塞：使用生理盐水清洁鼻腔',
                                '呼吸急促：立即就医检查',
                                '保持空气湿润，避免烟雾环境'
                            ]
                        },
                        {
                            id: 8,
                            title: '消化系统疾病',
                            description: '关注宝宝的消化健康',
                            tips: [
                                '便秘：增加水分摄入，腹部按摩',
                                '腹胀：观察腹部是否硬胀',
                                '呕吐：区分溢奶和病理性呕吐',
                                '食欲不振：观察精神状态变化'
                            ]
                        },
                        {
                            id: 5,
                            title: '👶 0-3个月护理要点',
                            description: '新生儿期的重点护理内容和实用技巧',
                            tips: [
                                '🛁 日常护理：每天洗澡水温37-38°C，脐带保持干燥，及时换尿布防红屁股',
                                '📏 发育监测：每周称重增长150-200g，满月抬头片刻，2个月追视，3个月会笑出声',
                                '⚠️ 异常信号：持续哭闹超过3小时、拒绝进食、发热超过37.5°C、呼吸急促需及时就医',
                                '🌡️ 体温监测：正常体温36.5-37.5°C，腋下测量最准确',
                                '👕 穿衣指导：比大人少穿一件，避免过度包裹导致过热',
                                '🧼 清洁护理：每日清洁眼部、鼻腔，保持干净卫生'
                            ]
                        },
                        {
                            id: 6,
                            title: '👶 4-6个月护理要点',
                            description: '婴儿期的发育与护理',
                            tips: [
                                '喂养：开始添加辅食，从米粉开始',
                                '睡眠：夜间睡眠延长，白天2-3次小睡',
                                '发育：翻身、坐立、抓握物品',
                                '体重：每周增长100-150克',
                                '辅食：单一食材，观察过敏反应',
                                '互动：多与宝宝说话、唱歌、做游戏'
                            ]
                        },
                        {
                            id: 7,
                            title: '👶 7-12个月护理要点',
                            description: '婴儿后期的成长指导',
                            tips: [
                                '喂养：辅食种类增加，逐渐过渡到家庭饮食',
                                '睡眠：夜间连续睡眠，白天1-2次小睡',
                                '发育：爬行、站立、走路、说话',
                                '体重：每月增长300-500克',
                                '安全：防跌倒、防误食、家居安全',
                                '教育：读绘本、听音乐、认知训练'
                            ]
                        },
                        {
                            id: 8,
                            title: '👶 1-2岁护理要点',
                            description: '幼儿期的全面发展',
                            tips: [
                                '喂养：断奶过渡，建立规律饮食习惯',
                                '睡眠：夜间10-12小时，白天1次午睡',
                                '发育：独立行走、语言爆发期、精细动作',
                                '体重：每月增长200-300克',
                                '教育：培养独立性、社交能力、规则意识',
                                '健康：定期体检、疫苗接种、意外预防'
                            ]
                        }
                    ],
                    feedingGuideData: [
                        {
                            id: 1,
                            title: '🍼 奶粉冲泡技巧',
                            description: '正确的奶粉冲泡方法和注意事项',
                            tips: [
                                '🌡️ 水温控制：40-50°C最佳，过热会破坏营养成分',
                                '📏 比例准确：1勺奶粉配30ml水，严格按说明书执行',
                                '🥄 冲泡顺序：先加水后加奶粉，避免结块',
                                '🔄 混合方式：轻摇勿用力摇晃，避免产生过多泡沫',
                                '🧼 器具清洁：奶瓶奶嘴每次使用前后都要彻底清洗消毒',
                                '⏰ 现冲现喝：冲好的奶粉1小时内喝完，不要存放'
                            ]
                        },
                        {
                            id: 2,
                            title: '🤱 正确喂奶姿势',
                            description: '母乳喂养和奶瓶喂养的正确方法',
                            tips: [
                                '📐 抱姿角度：抱起宝宝呈45度角，头部略高于身体',
                                '👄 含接方式：奶嘴完全进入口中，避免吸入空气',
                                '⏱️ 喂养时间：每次15-30分钟，观察宝宝饱腹信号',
                                '🤗 喂后拍嗝：竖抱轻拍背部5-10分钟，帮助排气',
                                '🍼 奶量控制：按需喂养，不要强迫宝宝喝完',
                                '📅 喂养记录：记录喂奶时间和奶量，观察规律'
                            ]
                        },
                        {
                            id: 3,
                            title: '😭 哭闹原因分析',
                            description: '识别宝宝哭闹的不同原因和应对方法',
                            tips: [
                                '🍼 饥饿信号：张嘴寻找、吸吮手指、烦躁不安',
                                '💧 尿湿不适：检查尿布是否需要更换',
                                '😴 困倦表现：揉眼睛、打哈欠、烦躁易怒',
                                '🌡️ 身体不适：发热、腹胀、皮肤红疹等',
                                '🤗 需要安抚：轻拍、摇摆、播放白噪音',
                                '🎵 环境因素：温度、光线、噪音是否合适'
                            ]
                        },
                        {
                            id: 4,
                            title: '🥄 辅食添加指南',
                            description: '4-6个月开始添加辅食的方法',
                            tips: [
                                '📅 添加时机：4-6个月，宝宝能坐稳、对食物感兴趣',
                                '🍚 首选食物：强化铁的米粉，质地细腻易消化',
                                '🥄 喂养方式：用小勺喂食，让宝宝适应吞咽',
                                '⏰ 循序渐进：每次只添加一种新食物，观察3-5天',
                                '🚫 避免食物：蜂蜜、坚果、易过敏食物',
                                '💧 补充水分：开始吃辅食后适量补充白开水'
                            ]
                        }
                    ],
                    sleepManagementData: [
                        {
                            id: 1,
                            title: '😴 新生儿睡眠特点',
                            description: '了解新生儿的睡眠规律和特点',
                            tips: [
                                '⏰ 睡眠时间：每天16-20小时，分多次睡眠',
                                '🔄 睡眠周期：每次2-4小时，浅睡眠较多',
                                '🌙 昼夜颠倒：前几周可能白天睡得多，夜间醒得频繁',
                                '😌 睡眠姿势：仰卧最安全，避免趴睡和侧睡',
                                '🛏️ 睡眠环境：安静、昏暗、温度适宜（20-22°C）',
                                '👶 睡眠信号：打哈欠、揉眼睛、烦躁不安'
                            ]
                        },
                        {
                            id: 2,
                            title: '🌅 建立睡眠规律',
                            description: '帮助宝宝建立良好的睡眠习惯',
                            tips: [
                                '☀️ 白天光线：保持明亮，让宝宝感受昼夜差别',
                                '🌙 夜间环境：保持昏暗安静，减少刺激',
                                '🛁 睡前仪式：洗澡、按摩、轻柔音乐形成固定流程',
                                '⏰ 规律作息：尽量固定睡觉和起床时间',
                                '🤱 夜间喂养：保持安静，喂完立即放回床上',
                                '📱 避免过度刺激：睡前1小时减少玩耍和兴奋活动'
                            ]
                        },
                        {
                            id: 3,
                            title: '😰 睡眠问题解决',
                            description: '常见睡眠问题的应对方法',
                            tips: [
                                '😭 夜间频醒：检查饥饿、尿湿、过冷过热等原因',
                                '🌀 睡眠倒退：4个月、8-10个月、18个月常见，属正常现象',
                                '😴 难以入睡：建立固定睡前仪式，营造舒适环境',
                                '🎵 安抚方法：轻拍、摇摆、白噪音、襁褓包裹',
                                '⏱️ 自主入睡：逐渐培养宝宝独立入睡能力',
                                '🩺 就医指征：持续睡眠困难、呼吸异常需咨询医生'
                            ]
                        },
                        {
                            id: 4,
                            title: '🛏️ 安全睡眠环境',
                            description: '创造安全的睡眠环境，预防意外',
                            tips: [
                                '🛏️ 床铺安全：硬质床垫、合适床单、无多余物品',
                                '🚫 避免物品：枕头、毛绒玩具、厚重被子',
                                '🌡️ 温度控制：室温20-22°C，宝宝穿轻薄睡衣',
                                '💨 空气流通：保持室内空气新鲜，避免烟雾',
                                '📏 床栏高度：床栏间距不超过6cm，防止卡住',
                                '👀 监护设备：可考虑使用婴儿监护器'
                            ]
                        }
                    ],
                    healthMonitorData: [
                        {
                            id: 1,
                            title: '🌡️ 体温监测',
                            description: '正确测量和判断宝宝体温',
                            tips: [
                                '📊 正常范围：腋下36.5-37.5°C，肛温37-38°C',
                                '🌡️ 测量方法：腋下测量最安全，保持5-10分钟',
                                '⚠️ 发热定义：腋下超过37.5°C需要关注',
                                '🧊 物理降温：温水擦浴、减少衣物、保持通风',
                                '💊 用药原则：3个月以下婴儿发热必须就医',
                                '🏥 就医指征：高热不退、精神萎靡、呼吸急促'
                            ]
                        },
                        {
                            id: 2,
                            title: '👁️ 日常观察要点',
                            description: '观察宝宝的健康状况和异常信号',
                            tips: [
                                '👀 精神状态：活泼好动、反应灵敏为正常',
                                '🍼 食欲变化：拒绝进食、吃奶量明显减少需注意',
                                '💩 大小便：观察颜色、性状、频次的变化',
                                '😭 哭声变化：持续尖叫、微弱哭声可能有问题',
                                '🌈 皮肤颜色：注意黄疸、苍白、发绀等异常',
                                '📏 生长发育：定期测量身高体重，记录发育里程碑'
                            ]
                        },
                        {
                            id: 3,
                            title: '🤧 常见疾病预防',
                            description: '预防新生儿常见疾病的方法',
                            tips: [
                                '🟡 新生儿黄疸：多晒太阳、勤喂奶、观察皮肤颜色',
                                '🔴 尿布疹：及时更换尿布、保持干燥、使用护臀膏',
                                '🤧 感冒预防：避免接触感冒人群、勤洗手、保持室内清洁',
                                '🦠 肠道感染：注意喂养卫生、奶具消毒、观察大便',
                                '🌡️ 湿疹护理：保持皮肤湿润、选择温和护肤品',
                                '💉 疫苗接种：按时接种疫苗，建立免疫屏障'
                            ]
                        },
                        {
                            id: 4,
                            title: '🚨 紧急情况处理',
                            description: '识别紧急情况并正确处理',
                            tips: [
                                '🫁 呼吸异常：呼吸急促、暂停、发绀立即就医',
                                '🤮 严重呕吐：喷射性呕吐、伴发热需紧急处理',
                                '💧 脱水征象：尿量减少、皮肤弹性差、囟门凹陷',
                                '🌡️ 高热惊厥：体温超过39°C伴抽搐，立即降温送医',
                                '😵 意识异常：嗜睡、反应迟钝、不易唤醒',
                                '📞 急救电话：120急救、儿科急诊、家庭医生'
                            ]
                        }
                    ]
                }
            },
            methods: {
                setActiveTab(tab) {
                    this.activeTab = tab;
                    // 移动端切换标签后关闭侧边栏
                    if (this.isMobile) {
                        this.sidebarOpen = false;
                    }
                },
                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                },
                closeSidebar() {
                    this.sidebarOpen = false;
                },
                toggleBabyCareMenu() {
                    this.babyCareMenuExpanded = !this.babyCareMenuExpanded;
                },
                checkMobile() {
                    this.isMobile = window.innerWidth <= 768;
                },
                calculatePregnancy() {
                    if (!this.lastPeriodDate) {
                        this.pregnancyInfo = {
                            days: '请选择日期',
                            weeks: '请选择',
                            extraDays: '',
                            dueDate: '请选择末次月经日期',
                            remainingDays: '请选择日期'
                        };
                        return;
                    }
                    
                    const lastPeriod = new Date(this.lastPeriodDate);
                    const today = new Date();
                    const timeDiff = today.getTime() - lastPeriod.getTime();
                    const daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
                    
                    // 计算预产期（末次月经日期 + 280天）
                    const dueDate = new Date(lastPeriod);
                    dueDate.setDate(dueDate.getDate() + 280);
                    
                    // 计算距离预产期的天数
                    const dueDateDiff = dueDate.getTime() - today.getTime();
                    const remainingDays = Math.floor(dueDateDiff / (1000 * 3600 * 24));
                    
                    // 计算孕期周数
                    const weeks = Math.floor(daysDiff / 7);
                    const extraDays = daysDiff % 7;
                    
                    this.pregnancyInfo = {
                        days: daysDiff,
                        weeks: weeks,
                        extraDays: extraDays,
                        dueDate: dueDate.toLocaleDateString('zh-CN'),
                        remainingDays: remainingDays > 0 ? remainingDays : 0
                    };
                }
            },
            mounted() {
                // 页面加载时计算孕期信息
                this.calculatePregnancy();
                // 每分钟更新一次孕期信息
                setInterval(() => {
                    this.calculatePregnancy();
                }, 60000);
                
                // 检测移动端
                this.checkMobile();
                // 监听窗口大小变化
                window.addEventListener('resize', () => {
                    this.checkMobile();
                    // 如果从移动端切换到桌面端，关闭侧边栏
                    if (!this.isMobile) {
                        this.sidebarOpen = false;
                    }
                });
            }
        }).mount('#app');
    </script>
</body>
</html>